<div id="formAction"></div>
<script type="text/html" id="productContentPage">
    <form class="layui-form layui-form-pane kaige-body-form" style="padding: 5px;" lay-filter="product_form_lay_filter"
          id="product_form_lay">
        <div class="layui-btn-group">
            <button type="button" class="layui-btn layui-btn-xs" onclick="addProductItemEvent()"
                    style="margin: 5px 20px;"><i
                    class="layui-icon layui-icon-add-circle"></i> 添加产品
            </button>
        </div>
        <table class="layui-table">
            <thead>
            <tr>
                <td width="25%">产品名称</td>
                <td width="20%">产品单价</td>
                <td width="20%">产品数量</td>
                <td width="35%">操作</td>
            </tr>
            </thead>
            <tbody id="productContent">
            {{# layui.each(d, function(index, item){ }}
            <tr class="all_{{ item.id }}" id="content_{{ item.id }}">
                <td style="padding: 0px;">
                    <div id="product_id_{{ item.id }}_select_box" class="select"
                         data-id="product_id_{{ item.id }}"></div>
                    <input type="hidden" id="product_id_{{ item.id }}" value="{{ item.product_id || '' }}"
                           name="product_id[{{ item.id }}]"/>
                </td>

                <td style="padding: 0px;">
                    <input id="price" name="price[{{ item.id }}]"
                           value="{{ item.price || '' }}"
                           class="layui-input" type="number">
                </td>
                <td style="padding: 0px;">
                    <input id="num" name="num[{{ item.id }}]"
                           value="{{ item.num || '' }}"
                           class="layui-input" type="number">
                </td>
                <td style="padding: 0px;">
                    <button type="button" class="layui-btn layui-btn-xs" onclick="delProductEvent(this)"
                            style="margin: 5px 20px;">删除
                    </button>

                    <button type="button" class="layui-btn layui-btn-xs" onclick="addPartEvent(this)"
                            style="margin: 5px 20px;">添加配件
                    </button>
                </td>
            </tr>
            <tr class="all_{{ item.id+1 }}" id="content_{{ item.id + 1 }}">
                <td colspan="4">
                    <table class="layui-table">
                        <thead>
                        <tr>
                            <td>配件名称</td>
                            <td>数量</td>
                            <td>操作</td>
                        </tr>
                        </thead>
                        <tbody id="productPartContent_{{ item.id }}">
                        {{# layui.each(item.part_list, function(index2, item2){ }}
                        <tr class="part_{{ index2+1 }}">
                            <td style="padding: 0px;">
                                <div id="product_part_id_{{ item.id }}_{{ index2+1 }}_select_box"
                                     class="part_select_{{ item.product_id }}"
                                     data-id="product_part_id_{{ item.id }}_{{ index2+1 }}"></div>

                                <input id="product_part_id_{{ item.id }}_{{ index2+1 }}"
                                       name="product_part_id[{{ item.id }}][{{ index2+1 }}]"
                                       value="{{ item2.product_part_id || '' }}"
                                       class="layui-input" type="hidden">
                            </td>
                            <td style="padding: 0px;">
                                <input id="product_part_id_num_{{ item.id }}_{{ index2+1 }}"
                                       name="product_part_id_num[{{ item.id }}][{{ index2+1 }}]"
                                       value="{{ item2.product_part_id_num || '' }}"
                                       class="layui-input" type="number">
                            </td>
                            <td style="padding: 0px;">
                                <button type="button" class="layui-btn layui-btn-xs" onclick="delProductPartEvent(this)"
                                        style="margin: 5px 20px;">删除
                                </button>
                            </td>
                        </tr>
                        {{# }); }}
                        </tbody>
                    </table>
                </td>
            </tr>
            {{# }); }}
            </tbody>
        </table>
        <div class="layui-form-item layui-hide">
            <button class="layui-hide" lay-submit="" id="product_form_btn_save" lay-filter="product_form_btn_save">保存数据
            </button>
        </div>
    </form>
</script>


<script type="text/html" id="productContentItem">
    <tr class="all_{{ d.id }}">
        <td style="padding: 0px;">
            <div id="product_id_{{ d.id }}_select_box" class="select" data-id="product_id_{{ d.id }}"></div>
            <input type="hidden" id="product_id_{{ d.id }}" value="{{ d.product_id || '' }}"
                   name="product_id[{{ d.id }}]"/>
        </td>

        <td style="padding: 0px;">
            <input name="price[{{ d.id }}]" value="{{ d.price || '' }}"
                   class="layui-input" type="number">
        </td>
        <td style="padding: 0px;">
            <input name="num[{{ d.id }}]" value="{{ d.num || '' }}"
                   class="layui-input" type="number">
        </td>
        <td style="padding: 0px;">
            <button type="button" class="layui-btn layui-btn-xs" onclick="delProductEvent(this)"
                    style="margin: 5px 20px;">删除
            </button>

            <button type="button" class="layui-btn layui-btn-xs" onclick="addPartEvent(this);"
                    style="margin: 5px 20px;">添加配件
            </button>
        </td>
    </tr>
    <tr class="all_{{ d.id+1 }}" id="content_{{ d.id + 1 }}">
        <td colspan="4">
            <table class="layui-table">
                <thead>
                <tr>
                    <td>配件名称</td>
                    <td>数量</td>
                    <td>操作</td>
                </tr>
                </thead>
                <tbody id="productPartContent_{{ d.id }}"></tbody>
            </table>
        </td>
    </tr>
</script>

<script type="text/html" id="productPartContentItem">
    <tr class="part_{{ d.id }}">
        <td style="padding: 0px;">
            <div id="product_part_id_{{ d.product_id }}_{{ d.id }}_select_box" class="part_select_{{ d.product_id }}"
                 data-id="product_part_id_{{ d.product_id }}_{{ d.id }}"></div>

            <input id="product_part_id_{{ d.product_id }}_{{ d.id }}"
                   name="product_part_id[{{ d.product_id }}][{{ d.id }}]"
                   value="{{ d.product_part_id || '' }}"
                   class="layui-input" type="hidden">
        </td>
        <td style="padding: 0px;">
            <input id="product_part_id_num" name="product_part_id_num[{{ d.product_id }}][{{ d.id }}]"
                   value="{{ d.product_part_id_num || '' }}"
                   class="layui-input" type="number">
        </td>
        <td style="padding: 0px;">
            <button type="button" class="layui-btn layui-btn-xs" onclick="delProductPartEvent(this)"
                    style="margin: 5px 20px;">删除
            </button>
        </td>
    </tr>
</script>


<script>
    layui.config({
        base: szoapcpath + '/static/kaige/layuiextend/'
    }).use(['xmSelect', 'laytpl', 'form', 'kaige'], function () {
        var form = layui.form,
            laytpl = layui.laytpl,
            kaige = layui.kaige,
            xmSelect = layui.xmSelect;

        window.addPartEvent = function (obj, data = {}) {
            var pid = $(obj).parent("td").parent("tr").find("td:first").find('input').val();
            var product_id = Number($(obj).parent("td").parent("tr").attr("class").replace("all_", ""));
            var getTpl = $("#productPartContentItem").html()
                , view = $("#productPartContent_" + product_id);
            var i = 0
            view.find('tr').each(function (index, item) {
                var t = $(item).attr('class');
                var t_id = t.replace("part_", "");
                if (Number(i) < Number(t_id)) {
                    i = Number(t_id);
                }
            });
            data.id = i + 1;
            data.product_id = product_id;
            laytpl(getTpl).render(data, function (html) {
                view.append(html);
                $(".part_select_" + product_id).each(function (index, item) {
                    var id = $(item).attr("data-id");
                    kaige.xmSelect({
                        id: id,
                        url: '/select/ProductPart',
                        udata: {automatch: 1, product_id: pid},
                        radio: true,
                        clickClose: true
                    });
                })
            });
        }

        window.selectContent = function () {
            $(".select").each(function (index, item) {
                var id = $(item).attr("data-id");
                kaige.xmSelect({
                    id: id,
                    url: '/select/Product',
                    udata: {automatch: 1},
                    radio: true,
                    clickClose: true
                });
                var product_id = $("#" +　id).val();
                $(".part_select_" + product_id).each(function (index2, item2) {
                    var id = $(item2).attr("data-id");
                    kaige.xmSelect({
                        id: id,
                        url: '/select/ProductPart',
                        udata: {automatch: 1, product_id: product_id},
                        radio: true,
                        clickClose: true
                    });
                })
            });


        }
        window.delProductEvent = function (obj) {
            if ($("#productContent").find('tr').length == 1) {
                layer.msg("至少留一个产品信息!");
            } else {
                $(obj).parent('td').parent('tr').next().remove();
                $(obj).parent('td').parent('tr').remove();
            }
        }

        window.delProductPartEvent = function (obj) {
            $(obj).parent('td').parent('tr').remove();
        }

        window.addProductItemEvent = function () {
            var data = {};
            var i = 0
            $("#productContent").children('tr').each(function (index, item) {
                var t = $(item).attr('class');
                var t_id = t.replace("all_", "");
                if (Number(i) < Number(t_id)) {
                    i = Number(t_id);
                }
            });
            data.id = i + 1;
            var getTpl = $("#productContentItem").html()
                , view = $("#productContent");
            laytpl(getTpl).render(data, function (html) {
                view.append(html);
                selectContent();
            });

        }

        window.showFormPage = function () {
            var da = [];
            var contract_product_ids = $("#contract_product_ids").val();
            if (contract_product_ids != '') {
                szoa.post('/crm.contract_product/index', {ids: contract_product_ids}, function (res) {
                    $.each(res.data, function (index, item) {
                        var d = {};
                        d = item;
                        d.id = index + 1;
                        da.push(d);

                    });
                    var res = $("#productContentPage").html(),
                        view = $("#formAction");
                    laytpl(res).render(da, function (html) {
                        view.append(html);
                        selectContent();

                    });
                })
            } else {
                var d = {};
                d.product_id = 1;
                d.id = 1;
                da.push(d);
                var res = $("#productContentPage").html(),
                    view = $("#formAction");
                laytpl(res).render(da, function (html) {
                    view.append(html);
                    selectContent();
                });
            }
        }

    });
</script>